<template>
  <div class="address-box">
    <div class="address-area">
      <!-- <el-input
        :disabled="disabled"
        @blur="onAddressArea($event)"
        class="wh"
        v-model="addressArea"
        :placeholder="placeholder[0]||''"
      /> -->
      <el-cascader
      class="wh"
        :disabled="disabled"
        :placeholder="placeholder[0] || ''"
        v-model="addressArea"
        filterable
        :options="list"
        :props="{
          label: 'label',
          value: 'value',
          children: 'children',
        }"
        @change="onAddressArea"
      ></el-cascader>
      <!--  :props="{
          label: 'areaName',
          value: 'areaName',
          children: 'childList',
        }" -->
    </div>
    <div class="address-details">
      <el-input
        :disabled="disabled"
        @blur="onAddressDetails($event)"
        class="wh"
        v-model="addressDetails"
        :placeholder="placeholder[1] || ''"
      />
    </div>
  </div>
</template>
<script>
import cityList from './citydata.js'
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: Array,
      default: () => ["省-市-区", "详细地址"],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      addressArea: null,
      addressDetails: null,
      list: cityList || [],
    };
  },
  watch: {
    value: {
      handler(newValue) {
        if (newValue[0]) {
          this.addressArea = (newValue[0] || "").split("-");
        }else{
          this.addressArea =[]
        }

        this.addressDetails = newValue[1] || "";
      },
      immediate: true,
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  mounted() {
    // this.$get({ url: "/areaApp/list" }).then((res) => {
    //   this.list = res;
    // });
  },
  methods: {
    onAddressArea() {
      if (!this.addressArea) {
        this.$emit("change", []);
      }
      if (this.addressArea.length > 0 && this.addressDetails) {
        this.$emit("change", [this.addressArea.join("-"), this.addressDetails]);
      }
    },
    onAddressDetails() {
      if (!this.addressDetails) {
        this.$emit("change", []);
      }
      if (this.addressArea.length > 0 && this.addressDetails) {
        this.$emit("change", [this.addressArea.join("-"), this.addressDetails]);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.address-box {
  width: 100%;
  display: flex;
  align-items: center;
  .address-area {
    flex: 2;
    margin-right: 12px;
  }
  .address-details {
    flex: 3;
  }
}
</style>